<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>HOJ后台管理</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <script src="../js/jquery-3.3.1.min.js"></script>
  <script src="./js/controller.js"></script>
  <script src="./js/myajax.js"></script>
  <script src="./js/filter.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">HOJ后台管理</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item"><a href="/front/index">返回主页</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li id="tab1" class="layui-nav-item">
          <a href="javascript:;">页面管理</a>
          <dl class="layui-nav-child">
            <dd id="tab1-1"><a href="./index">主页信息</a></dd>
            <dd><a href="javascript:;">bala bala</a></dd>
          </dl>
        </li>
        <li id="tab2" class="layui-nav-item">
          <a href="javascript:;">用户管理</a>
          <dl class="layui-nav-child">
            <dd id="tab2-1"><a href="./userList">用户概览</a></dd>
            <dd id="tab2-2"><a href="./code">代码查看</a></dd>
          </dl>
        </li>
        <li id="tab3" class="layui-nav-item">
          <a href="javascript:;">题目管理</a>
          <dl class="layui-nav-child">
            <dd id="tab3-1"><a href="./problemList">题目概览</a></dd>
            <dd id="tab3-2"><a href="./addProblem">添加题目</a></dd>
          </dl>
        </li>
        <li id="tab4" class="layui-nav-item">
          <a href="javascript:;">比赛管理</a>
          <dl class="layui-nav-child">
            <dd id="tab4-1"><a href="./contestList">比赛概览</a></dd>
            <dd id="tab4-2"><a href="./addContest">添加比赛</a></dd>
            <dd id="tab4-3"><a href="./contestUser">用户总览</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
      <table  class="layui-hide" id="demo" lay-filter="test"></table>
      <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-md" lay-event="searchName"><i class="layui-icon">&#xe615;</i>查找用户</button>
        </div>
      </script>
      <script type="text/html" id="switchTpl">
        <!-- 这里的 checked 的状态只是演示 -->
        <input type="checkbox" name="deleted" value="{{d.userId}}" lay-skin="switch" lay-text="是|否" lay-filter="deleted" {{d.deleted==true? 'checked':''}}>
      </script>
      <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="changePassword">密码</a>
        <a class="layui-btn layui-btn-xs" lay-event="privilege">权限</a>
      </script>
    </div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © Hunan University Online Judge
  </div>
</div>
<script src="./layui/layui.js"></script>
<script>
  //JavaScript代码区域

  layui.use('element', function(){
    var element = layui.element;
  });
  var tab = document.getElementById("tab2");
  tab.className += "  layui-nav-itemed";
  var tab_t = document.getElementById("tab2-1");
  tab_t.className += " layui-this";

  layui.use('table', function(){
    var table = layui.table;
    var form = layui.form;
    var option = {
      elem: '#demo',
      toolbar: '#toolbarDemo',
      url: ojurl + "/admin/user/list", //数据接口
      page: true, //开启分页
      limit: 15,
      limits: [10,15,30,50],
      headers: {"token" : getName(tokenName)},
      parseData: function(res){ //res 即为原始返回的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.data.count, //解析数据长度
          "data": res.data.list //解析数据列表
        };
      },
      response: {
        statusCode: 200 //规定成功的状态码，默认：0
      },
      cols: [[ //表头
        {field: 'userId', width: 80, title: 'ID', sort: true, fixed: 'left'},
        {field: 'name', title: '用户名', width: 120},
        {field: 'solved', title: '解决数', width: 80},
        {field: 'submit', title: '提交数', width: 80},
        {field: 'ip', title: '登陆ip'},
        {field: 'registerTime', title: '注册时间', width: 160},
        {field: 'lastLoginTime', title: '最后登陆时间', width: 160},
        {field: 'school', title: '学校', width: 160},
        {field: 'major', title: '专业', width: 120},
        {field: 'grade', title: '年级', width: 100},
        {field: 'contact', title: '联系方式', width: 180},
        {field: 'deleted', title: '禁止登录', templet: '#switchTpl', fixed: 'right', width: 86},
        {width: 120, templet: '#barDemo', fixed: 'right'}
      ]]
    };
    //第一个实例
    var tableObj = table.render(option);

    //监听禁止用户登录操作
    form.on('switch(deleted)', function(obj){
      var jsonData = new Object();
      jsonData.userId = String(obj.value);
      jsonData.delete = (obj.elem.checked==true? "1" : "0");
      updateDeletedUser(jsonData);
    });

    table.on('toolbar(test)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      if (obj.event == 'searchName') {
        layer.open({
          type: 1, 
          title: '查找用户',
          area: ['520px', '380px'],
          shade: 0,
          content: '<form class="layui-form layui-form-pane" role="form" id="user" style="margin: 1em">'+
            '<div class="layui-form-item"><label for="name" class="layui-form-label">用户名</label>'+
            '<div class="layui-input-block"><input type="text" class="layui-input" id="name" name="name"/></div></div>'+
            '</form>',
          btn: ['提交', '关闭'], //只是为了演示
          yes: function(){
            var name = document.getElementById("name").value;
            option.where = {"name" : name};
            option.url = ojurl + "/admin/user/search";
            tableObj.reload(option);
            layer.closeAll();
          },
          btn2: function(){
            layer.closeAll();
          }
        });
      }
    });

    //监听工具条
    table.on('tool(test)', function(obj){
      var data = obj.data;
      if (obj.event == "changePassword") {
        layer.open({
            type: 1, //此处以iframe举例
            title: '修改密码',
            area: ['520px', '380px'],
            shade: 0,
            content: '<form class="layui-form layui-form-pane" role="form" id="user" style="margin: 1em">'+
              '<div class="layui-form-item"><label for="userId" class="layui-form-label">用户编号</label>'+
              '<div class="layui-input-block"><input type="number" class="layui-input" id="userId" name="userId" value="'+data.userId+'" disabled/></div></div>'+
              '<div class="layui-form-item"><label for="password" class="layui-form-label">新密码</label>'+
              '<div class="layui-input-block"><input type="password" class="layui-input" id="password" name="password"/></div></div>'+
              '<div class="layui-form-item"><label for="confirm" class="layui-form-label">确认</label>'+
              '<div class="layui-input-block"><input type="password" class="layui-input" id="confirm" name="confirm"/></div></div>'+
              '</form>',
            btn: ['提交', '关闭'], //只是为了演示
            yes: function(){
              var jsonData = new Object();
              jsonData.userId = document.getElementById("userId").value;
              jsonData.password = document.getElementById("password").value;
              var confirm = document.getElementById("confirm").value;
              if (confirm != jsonData.password) {
                layer.alert("两次密码不一致");
                return;
              }
              changePassword(jsonData, layer);
            },
            btn2: function(){
              layer.closeAll();
            }
          });
      }
      else if (obj.event == "privilege") {
        var name = data.name;
        var userId = data.userId;
        window.location.href = "./privilege?userId="+userId+"&name="+name;
      }
    });
  });
</script>
</body>
</html>